<template>
  <div class="container">
    <header>
      <div class="count-title">房地产及建安行业大数据监控云平台</div>
      <div class="current-time">{{currenTime}}</div>
    </header>
    <section class="content">
      <div class="left">
        <div class="jindu margin-t5">
          <div class="title">
            <span>年度税收完成进度</span>
          </div>
          <div class="progress">
            <span class="current" :style="{width: data.progress}">{{data.progress}}</span>
          </div>
        </div>
        
        <div class="font-back margin-t5">
          <left-mod2></left-mod2>
        </div>
        <div class="key-kpi margin-t5">
          <p class="title">关键指标监控</p>
          <left-mod3></left-mod3>
        </div>
      </div>
      <div class="center">
        <map-aera></map-aera>
        <sale-rank :saleData="data.saleData"></sale-rank>
      </div>
      <div class="right">
        <zhaopai-rank class="margin-t5" :zpData="data.zhaopaiData"></zhaopai-rank>
        <asset-rank class="margin-t5" :assetData="data.assetData"></asset-rank>
        <danger-rank class="margin-t5" :dangerData="data.dangerData"></danger-rank>
      </div>
    </section>
    
  </div>
</template>

<script>
  import moment from 'moment'
  import LeftMod2 from './../left-mod2.vue'
  import LeftMod3 from './../left-mod3.vue'
  import SaleRank from '../sale-rank.vue'
  import ZhaopaiRank from './zhaopai-rank.vue'
  import AssetRank from './asset-rank.vue'
  import DangerRank from './danger-rank.vue'
  import MapAera from '../echart-map.vue'
  import data from '../../data.js'

  export default {
    components: {
      LeftMod2,
      LeftMod3,
      SaleRank,
      MapAera,
      ZhaopaiRank,
      AssetRank,
      DangerRank
    },
    data() {
      return {
        currenTime: '',
        data: {},
        totalData: data.totalData
      }
    },
    watch: {
      '$route':'getData'
    },
    created() {
      this.getData()
      this.getTime()
    },
    methods: {
      getData() {
        console.log('获取数据')
        this.data = data[this.$route.params.k]
        console.log(this.data);
      },
      // 解析参数
      getQueryString(name) {
          var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
          var r = window.location.search.substr(1).match(reg);
          if (r != null) {
                  return unescape(r[2]);
          }
          return null;
      },
      getTime() {
        setInterval(()=>{
          this.currenTime = moment().format('YYYY-MM-DD hh:mm:ss');
        })
      }
    },
  }
</script>

<style scoped="scoped">
  * {
    box-sizing: border-box;
  }
  .margin-t5 {margin-bottom: 5px}
  .container {
    padding: 20px;
    height: 100vh;
    overflow: hidden;
    background-color: #3498db;
    /* background: linear-gradient(top, #3498db, #ace);
    background: -webkit-linear-gradient(top,#3498db, #ace); */
    
    /* 181738 */
    /* background: url(../asset/home-bg.jpg) top center no-repeat #11214e; */
  }
  header {
    position: relative;
    height: 10vh;
    background-image: url(../../asset/title-bg.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 100%;
  }
  .current-time {
    position: absolute;
    bottom: 5px;
    left: 50%;
    margin-left: -55px;
    font-size: 12px;
    color: #aad4f1;
  }
  .count-title {
    height: 100%;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    line-height: 9vh;
    color: #143e5a;
  }
  .content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 80vh;
    padding-top: 20px;
    padding-bottom: 15px;
    /* background: rgba(0,0,0,0.3); */
  }
  .content .center {width: 50%; margin: 0 10px}
  .content .left,
  .content .right {
    width: 25%;
    flex: auto;
  }
  .content .left {
    margin-left: 20px;
    /* background: rgba(255,255,0,0.3); */
  }
  .content .center {
    /* width: 60%; */
    /* background: rgba(255,255,298,0.3); */
  }
  .content .right {
    margin-right: 20px;
    /* background: rgba(25,255,16,0.3); */
  }
  .jindu {
    padding: 20px;
    height: 20vh;
    font-size: 16px;
    background-image: url(../../asset/border.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  .jindu .title {
    color: #cee8f1;
    font-size: 14px;
  }
  .jindu .progress {
    margin-top: 20px;
    height: 20px;
    padding: 2px;
    border: 1px solid #225b7f;
    border-left-width: 4px;
    border-right-width: 4px;
    text-align: center;
    background-color: rgba(0,0,0,0.1);
    border-radius: 2px;
  }
  .jindu .progress .current {
    display: block;
    height: 100%;
    padding: 0 5px;
    font-size: 10px;
    color: #fff;
    text-align: right;
    border-radius: 2px;
    background-image: -webkit-linear-gradient(left, #3ac4f9,  #14ff76, #ff901e);
  }
  .font-back {
    padding: 10px;
    height: 30vh;
    text-align: center;
    background-image: url(../../asset/border.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  
  .font-back .table {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 10px;
    border: 1px solid #124e98;
    border-radius: 10px;
  }
  .font-back .table .img {
    flex: 1;
  }
  .font-back .table .img {
    width: 100%;
  }
  .font-back .table .text {
    flex: 1;
    margin-left: 20px;
    text-align: left;
    font-size: 12px;
    color: #68d8fe;
  }
  .font-back .table .text p {
    margin: 5px 0;
    padding: 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
  }
  .font-back .table .text p span {
    margin-left: 5px;
    font-size: 14px;
  }
  .font-back .table .text .project span {
    color: yellow;
  }
  .font-back .table .text .success span {
    color: #147dff;
  }
  .font-back .table .text .danger span {
    color: #d24242;
  }
  .font-back .table .text p i {
    display: inline-block;
    margin-right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 6px;
    background: #000000;
    vertical-align: middle;
  }
  .font-back .table .text p i:before {
    content: '';
    display: inline-block;
    margin-left: -3px;
    margin-top: -3px;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    border: 1px solid #0074D9;
    vertical-align: top;
  }
  
  .font-back .table .text .success i {
    background: #147dff;
  }
  .font-back .table .text .danger i {
    background: #d24242;
  }
  .key-kpi {
    padding: 15px;
    height: 30vh;
    background-image: url(../../asset/border.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  .key-kpi .title {
    color: #cee8f1;
    font-size: 14px;
  }
  .key-kpi .cont {
    margin-top: 10px;
    height: 40px;
    background: #68d8fe;
    opacity: 0.2;
    border-radius: 4px;
  }
</style>
